<template>
	<a-modal
		:title="title"
		:width="modalWidth"
		:bodyStyle="bodyStyle"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@cancel="handleCancel"
		:destroyOnClose="true"
		:maskClosable="false"
		:footer="null"
	>
		<a-spin :spinning="confirmLoading">
			<a-descriptions :column="2" v-if="cardInfo">
				<a-descriptions-item label="卡券名称">{{ cardInfo.cardName }}</a-descriptions-item>
				<a-descriptions-item label="卡券状态"><a-tag :color="cardInfo.status == 1 ? '#247cf0' : '#f50'">{{ cardInfo.status == 1 ? '启用' : '作废' }}</a-tag></a-descriptions-item>
				<a-descriptions-item label="所属活动">{{ cardInfo.activityName }}</a-descriptions-item>
				<a-descriptions-item label="发行数量">{{cardInfo.publishCount}}</a-descriptions-item>
				<a-descriptions-item label="剩余数量">{{ cardInfo.lastCount }}</a-descriptions-item>
				<a-descriptions-item label="有效天数">{{ cardInfo.activeDay }}</a-descriptions-item>
				<a-descriptions-item label="卡券封面" span="2"><img class="imgbox" :src="filebaseUrl + cardInfo.picUrl" /></a-descriptions-item>
				<a-descriptions-item label="卡券备注"  span="2">{{cardInfo.remark}}</a-descriptions-item>
			</a-descriptions>
		</a-spin>
	</a-modal>
</template>

<script>
import { api } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
export default {
	name: 'cardVoucherModal',
	mixins: [ModalMixins],
	data() {
		return {
			cardInfo: undefined
		};
	},
	created() {},
	methods: {
		show(record) {
			this.visible = true;
			if (record) {
				this.title = record.cardName + '卡券详情';
				this.getCardVoucherDetail(record.cardVoucherId);
			}
		},

		close() {
			this.$emit('close');
			this.visible = false;
		},
		handleCancel() {
			this.close();
		},
		getCardVoucherDetail(id) {
			this.confirmLoading = true;
			this.$postAction(api.getCardVoucherDetail, {
				id
			})
				.then(res => {
					if (res.result) {
						this.cardInfo = { ...res.data };
					}
				})
				.finally(() => {
					this.confirmLoading = false;
				});
		}
	}
};
</script>

<style scoped lang="less">
.imgbox {
	display: block;
	width: 200px;
}
/deep/ .ant-descriptions-item > span {
	vertical-align: top;
}
</style>
